<template>
  <div class="studentBox">
    <div class="stuTop">
      <div><span class="title">学生管理</span></div>
      <div>

        <el-button style="font-size: 12px" v-show="isButton(53)" @click="batchAdd">批量添加</el-button>
        <el-button type="primary" style="font-size: 12px" @click="addStu" v-show="isButton(53)">添加学生</el-button>
      </div>
    </div>
    <div class="search">
      <el-form :inline="true" :model="data" class="demo-form-inline">
        <el-form-item label="关键字">
          <el-input v-model="params.key" placeholder="请输入关键字" />
        </el-form-item>
        <el-form-item label="部门">
          <el-cascader v-model="DepList" @change="handleChange" placeholder="请选择" :options="DepOptions"
            :props="{ label: 'name', value: 'id', checkStrictly: true }" />
        </el-form-item>
        <el-form-item label="班级">
          <el-select v-model="ClassOptions" placeholder="请选择" @change="changeClass">
            <el-option v-for="item in ClassList" :label="item.name" :value="item.id" :key="item.id" />
          </el-select>
        </el-form-item>
        <el-button type="primary" style="margin-top: -18px; font-size: 12px; height: 29px" @click="select">搜索
        </el-button>
        <el-button type="danger" style="margin-top: -18px; font-size: 12px; height: 29px" :disabled="buttDis"
          @click="dells" v-show="isButton(55)">批量删除</el-button>
      </el-form>
    </div>
    <!-- 下部表格  分页 -->
    <div class="buttom">
      <div class="table">
        <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"
          v-loading="loading">
          <el-table-column type="selection" width="55" />
          <el-table-column label="学生姓名" width="120">
            <template #default="scope">{{ scope.row.name }}</template>
          </el-table-column>
          <el-table-column property="remarks" label="备注" width="120" />
          <el-table-column property="depname" label="所属部门" show-overflow-tooltip />
          <el-table-column property="classname" label="所在班级" show-overflow-tooltip />
          <el-table-column property="username" label="账号" show-overflow-tooltip />
          <el-table-column property="addtime" label="添加时间" show-overflow-tooltip />
          <el-table-column property="操作" label="操作" width="180" v-if="isButton(54) || isButton(55)">
            <template #default="scope">
              <span style="color: #409eff; cursor: pointer" @click="setPass(scope.row)"
                v-show="isButton(54)">重置密码</span>
              <span style="padding: 0px 10px; color: #409eff; cursor: pointer" @click="edit(scope.row)"
                v-show="isButton(54)">修改</span>
              <span style="color: #409eff; cursor: pointer" @click="del(scope.row.id)" v-show="isButton(55)">删除</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagin">
        <el-pagination v-model:currentPage="params.page" v-model:page-size="params.psize"
          :page-sizes="[10, 20, 50, 100]" small background layout="total, sizes, prev, pager, next, jumper"
          :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>

    <!-- 重置密码 -->
    <resetPass :isShow="isShow" @setIs="setIs"></resetPass>
    <!-- 添加学生 -->
    <StuAdd :isStu="isStu" @addStud="addStud" :updLine="JSON.stringify(updLine)"></StuAdd>
  </div>
  <!-- 批量添加弹出框 -->
  <StuImport @imports="imports" :isImport="isImport" @isImports="isImports"></StuImport>
</template>

<script lang='ts' setup>
import { provide, reactive, toRefs, watch, watchEffect } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
// 权限控制按钮是否隐藏方法导入
import { isButton } from "../../utils/isButton";
// 引入封装接口
import {
  Department,
  Classes,
  StuList,
  StuDel,
  StuDell,
} from "../../apis/student/student";
// 引入重置密码对话框
import resetPass from "../../components/students/resetPass.vue";
// 引入添加学生对话框
import StuAdd from "../../components/students/StuAdd.vue";
// 引入批量导入
import StuImport from '../../components/students/StuImport.vue'
const data: any = reactive({
  params: {
    page: 1,
    psize: 10,
    key: "",
    depid: "",
    classid: "",
  },
  // 列表
  tableData: [],
  // 部门三级联动
  DepOptions: [],
  DepList: [],
  // 班级
  ClassOptions: [],
  ClassList: [],
  // 加载
  loading: true,
  // 重置密码对话框
  isShow: false,
  // 重置密码当前行
  line: {},
  // 是否刷新页面
  Show: false,
  // 总条数
  total: 0,
  // 添加学生弹出框
  isStu: false,
  // 修改当前行
  updLine: {},
  refresh: false,
  refreshs: false,
  // 批量删除禁用
  buttDis: true,
  ids: [],
  isImport: false,
  stuShow: false,
  isShows: 0
});
const {
  isShows,
  ids,
  buttDis,
  updLine,
  isStu,
  total,
  Show,
  loading,
  params,
  tableData,
  DepList,
  DepOptions,
  ClassList,
  ClassOptions,
  isShow,
  isImport
}: any = toRefs(data);
provide("data", data);

// 批量删除方法
const Dell = async () => {
  const res: any = await StuDell({ ids: ids.value });
  if (res.errCode === 10000) {
    ElMessage.success("删除成功");
    StudentList();
  } else {
    ElMessage.error(res.errMsg);
  }
};
// // 批量删除事件
const dells = async () => {
  const conf = await ElMessageBox.confirm("确定要删除选中的学生吗?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }).catch(() => { ElMessage.error("已取消删除") });
  if (conf) Dell()
};
// 全选
const handleSelectionChange = (val: any) => {
  if (val.length > 0) {
    buttDis.value = false;
  } else {
    buttDis.value = true;
    return;
  }
  data.ids = val.map((item: any) => item.id);
};
// 部门接口
const Departments = async () => {
  const res: any = await Department();
  if (res.errCode === 10000) {
    data.DepOptions = res.data.list;
  } else {
    ElMessage.error(res.errMsg);
  }
};
Departments();
// 班级接口
const Classe = async (depid: any) => {
  const res: any = await Classes({ depid });
  // console.log(res)
  if (res.errCode === 10000) {
    data.ClassList = res.data.list;
  } else {
    ElMessage.error(res.errMsg);
  }
};
// 部门三级联动内容改变调班级接口
const handleChange = (e: any) => {
  params.value.depid = e.at(-1);
  Classe(e.at(-1));
};
// 班级内容改变
const changeClass = (e: any) => {
  params.value.classid = e;
};
// 列表
const StudentList = async () => {
  const res: any = await StuList(params.value);
  if (res.errCode === 10000) {
    data.tableData = res.data.list;
    data.total = res.data.counts;
  } else {
    ElMessage.error(res.errMsg);
  }
  loading.value = false;
};
StudentList();
// console.log(data.isShows)
watchEffect(() => {
  if (data.refresh === true) {
    StudentList();
  }
  if (data.refreshs === true) {
    StudentList();
  }
  if (data.isShows === 1) {
    ElMessage.success('添加成功')
    StudentList()
  }
  if (data.isShows === 2) {
    data.loading = true
  }
});
// 监听isShow是否发生改变
watchEffect(() => {
  if (Show.value) {
    console.log(1);
    StudentList();
  }
});
// 搜索
const select = () => {
  StudentList();
};
// 删除方法
const dell = async (id: Number) => {
  const res: any = await StuDel(id);
  if (res.errCode === 10000) {
    ElMessage.success("删除成功");
    StudentList();
  } else {
    ElMessage.error(res.errMsg);
  }
};
// 删除
const del = (id: Number) => {
  ElMessageBox.confirm("确定要删除该考试吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      dell(id);
    })
    .catch(() => {
      ElMessage.error("已取消删除");
    });
};
// 重置密码
const setIs = (e: any) => {
  isShow.value = e;
};
const setPass = (row: any) => {
  isShow.value = true;
  data.line = row;
};
// 分页
const handleSizeChange = (val: number) => {
  params.value.psize = val;
  StudentList();
};
const handleCurrentChange = (val: number) => {
  params.value.page = val;
  StudentList();
};
// 添加学生
const addStud = (e: any) => {
  isStu.value = e;
};
const addStu = () => {
  isStu.value = true;
};
// 修改
const edit = (row: any) => {
  isStu.value = true;
  data.updLine = row;
};
// 弹出学生批量添加
const batchAdd = () => {
  isImport.value = true
}
const imports = (e: any) => {
  console.log('父组件', e)
}
const isImports = (e: any) => {
  isImport.value = e
}
</script>
<style scoped>
@import url("../../static/css/student/student.css");
</style>